<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      .pink {
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <button class="pink">按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button type="button" onclick="alert('欢迎!')">点我!</button>

    <p id="demo">JavaScript 能改变 HTML 元素的内容。</p>
    <p id="demo2">1</p>
    <p id="demo3"></p>
    <p>创建js对象</p>
    <p id="demo4">计算两个数乘积</p>

    <script>
      //  实现按钮功能
      let bts = document.querySelectorAll("button");
      for (let i = 0; i < bts.length; i++) {
        bts[i].addEventListener("click", function () {
          document.querySelector(".pink").className = "";
          this.className = "pink";
        });
      }

      // 页面弹出警示的对话框1
      // alert('hello world')
      // console.log('hello world')
      // // 输入语句 prompt
      // prompt('请输入你的名字')
      // document.write('文档输出内容')
      // document.write('<h1>我是lch</h1>')

      // alert('hello js')
      // prompt('javaScript 我来了')
      // console.log('hello js')

      document.write("<h1>这是一个标题</h1>");
      document.write("<p>这是一个段落</p>");

      function myFunction() {
        x = document.getElementById("demo"); //查找元素
        x.innerHTML = "hello js"; //修改内容
      }

      function changeImage() {
        element = document.getElementById("myimage");
        if (element.src.match("bulbon")) {
          element.src = "/images/pic_bulboff.gif";
        } else {
          element.src = "/images/pic_bulbon.gif";
        }
      }

      function myFunction2() {
        x = document.getElementById("demo");
        x.style.color = "#ff0000";
      }

      function myFunction3() {
        let x = document.getElementById("demo2");
        if (isNaN(x) || x == "") {
          alert("不是数字");
        }
      }

      function myFunction4() {
        let carname = "lch";
        document.getElementById("demo3").innerHTML = carname;
      }

      let person = {
        firstName: "lch",
        lastName: "Doe",
        age: 50,
        eyeColor: "blue",
      };
      document.getElementById("demo").innerHTML =
        person.firstName + " 现在 " + person.age + " 岁.";
    
      
        function myFunction5(name,job)
        {
          alert("Welcome " + name + ", the " + job);
        }

        function myFunction6(a,b)
        {
          return a*b;
        }

        document.getElementById("demo4").innerHTML=myFunction6(5,7);

    
    </script>
    <button type="button" onclick="myFunction()">点击这里</button>

    <!--  查看src属性中有没有包含bulbon这个字符串，如果存在，那么图片src就更新为 bulboff.gif-->

    <button
      id="myimage"
      onclick="changeImage()"
      src="/images/pic_bulboff.gif"
      width="100"
      height="180"
    ></button>
    <button type="button" onclick="myFunction2()">点击这里</button>
    <button type="button" onclick="myFunction3()">点击这里</button>
    <button type="button" onclick="myFunction4()">点击这里</button>
    <button onclick="myFunction5('lch','Wizard')">点击这里</button>
  </body>
</html>
